<template>
	<view class="content">
		<uni-card>
			<uni-forms ref="form" :modelValue="messageForm">
				<uni-forms-item label="标题">
					<uni-easyinput v-model="messageForm.title" placeholder="5-30字符" />
				</uni-forms-item>
				<uni-forms-item label="内容">
					<uni-easyinput type="textarea" v-model="messageForm.content" placeholder="最多500个字符" />
				</uni-forms-item>
				<uni-forms-item>
					<view class="example-body">
						<uni-file-picker mode="grid" :auto-upload="false" limit="9" title="最多选择9张图片"
							file-mediatype="image" @select="select">
						</uni-file-picker>
					</view>
				</uni-forms-item>
				<uni-forms-item label="分类">
					<radio-group style="margin-top: 2px;" @change="radioChange">
						<label style="margin-right: 12px;">
							<radio value="吐槽" style="transform: scale(0.7);" /><text>吐槽</text>
						</label>
						<label style="margin-right: 12px;">
							<radio value="表白" style="transform: scale(0.7);" /><text>表白</text>
						</label>
						<label style="margin-right: 15px;">
							<radio value="公告" style="transform: scale(0.7);" /><text>公告</text>
						</label>
						<label>
							<radio value="失物招领" style="transform: scale(0.7);" /><text>失物招领</text>
						</label>
					</radio-group>
				</uni-forms-item>
			</uni-forms>
			<view class="message_bottom">
				<button type="primary" size="mini" @click="sendMessage">发送</button>
				<button type="default" size="mini">重置</button>
			</view>

		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageForm: {
					title: '',
					content: '',
					classification: ''
				},

			};
		},
		created() {
			this.resetImgs()
		},
		methods: {
			radioChange(e) {
				this.messageForm.classification = e.detail.value
			},

			// 获取上传状态
			async select(e) {
				console.log('选择文件：', e)
				this.uploadImg(e.tempFilePaths, e.tempFiles)
			},
			uploadImg(tempFilePaths, tempFiles) {
				console.log(tempFilePaths, tempFiles);
				// let reSize = tempFiles.size
				tempFiles.forEach(item => {
					if (item.size > 5242880) {
						uni.showToast({
							title: '图片过大!',
							duration: 1500,
							icon: "error"
						})
						return
					}
				})
				let res = {}
				tempFilePaths.forEach(async (item) => {

					res = await uni.uploadFile({
						url: 'http://124.70.108.19:81/wsw/images/upload',
						filePath: item,
						name: 'imgFile',
						header: {
							cookie: JSON.parse(uni.getStorageSync('WSWUser'))
						}
					})
					if (res[1].statusCode != 200) {
						uni.showToast({
							title: '图片上传失败',
							duration: 1500,
							icon: 'none'
						})
						return
					}
					console.log(res[1]);
				})





				// if (reSize > 5242880) {
				// 	uni.showToast({
				// 		title: '图片过大!',
				// 		duration: 1500,
				// 		icon: "error"
				// 	})
				// 	return
				// }

				// let res = await uni.uploadFile({
				// 	url: 'http://124.70.108.19:81/wsw/images/upload',
				// 	filePath: tempFilePaths[0],
				// 	name: 'imgFile',
				// 	header: {
				// 		cookie: JSON.parse(uni.getStorageSync('WSWUser'))
				// 	}
				// })
				// console.log(res[1]);
				// if (res[1].statusCode != 200) {
				// 	uni.showToast({
				// 		title: '图片上传失败',
				// 		duration: 1500,
				// 		icon: 'none'
				// 	})
				// }
			},
			// 发帖
			async sendMessage() {
				let {
					title,
					content,
					classification
				} = this.messageForm
				if (title.trim() == '' || content.trim() == '' || classification == '') {
					uni.showToast({
						title: '标题/内容、分类不能为空!',
						duration: 1500,
						icon: 'error'
					})
				} else {
					console.log(this.messageForm);
					let {
						data: res
					} = await uni.$http.post('/messages/saveOneMessage', this.messageForm)
					if (res.code == 2000) {

						uni.switchTab({
							url: '../home/home'
						})
						uni.showToast({
							title: '发送成功',
							duration: 1500,
							icon: 'success'
						})
						uni.switchTab({
							url: '/pages/home/home'
						})
						this.messageForm = {}
					} else {
						uni.showToast({
							title: '发送失败',
							duration: 1500,
							icon: 'error'
						})
					}
				}
			},

			// 重置图片
			async resetImgs() {
				let {
					data: res
				} = await uni.$http.get('/images/reset')
				console.log(res);
			}
		}
	}
</script>

<style lang="scss">
	.content {

		.message_bottom {
			display: flex;
			justify-content: space-around;
		}
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>
